<!-- Page header -->
<div class="page-header d-print-none">
    <div class="container-xl">
      <div class="row g-2 align-items-center">
        <div class="col">
          <!-- Page pre-title -->
          <!-- <div class="page-pretitle">
            子标题
          </div> -->
          <h2 class="page-title" id="article_list_board_title">
            关注
          </h2>
          <!-- 帖子数量 -->
          <div class="text-muted mt-1" id="article_list_count_board"></div>
        </div>
        <!-- Page title actions -->
        <div class="col-auto ms-auto d-print-none">
          <div class="btn-list">
            <!-- 发新帖按钮 宽屏 -->
            <a  href="javascript:void(0);" class="btn btn-primary d-none d-sm-inline-block article_post">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M12 5l0 14" />
                <path d="M5 12l14 0" />
              </svg>
              发布帖子
            </a>
            <!-- 发新帖按钮 窄屏 -->
            <a href="javascript:void(0);" class="btn btn-primary d-sm-none btn-icon article_post" aria-label="发布帖子">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M12 5l0 14" />
                <path d="M5 12l14 0" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Page body -->
  <div class="page-body">
    <div class="container-xl">
      <div class="row justify-content-center">
        <!-- 显示列表的宽度 -->
        <div class="col-12">
          <div class="card">
            <div class="card-body">
              <div class="divide-y" id="article-items-body">
                <!-- 动态生成帖子列表 -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    $(function () {
      // ========================= 获取帖子列表 =======================
      // 成功后，调用listBuildArticleList()方法，构建帖子列表
      $.ajax({
        type: 'get',
        url: '/article/getBySubscribe',
        success: function(respData) {
          if (respData.code == 0) {
            listBuildArticleList(respData.data);
          } else {
            // 提示失败信息
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function() {
          // HTTP 请求错误
          $.toast({
            heading: '错误',
            text: '访问出现问题，请与管理员联系.',
            icon: 'error'
          });
        }
      });

      // ========================= 构造帖子列表 =======================
      function listBuildArticleList(data) {
        if(data.length == 0) {
          $('#article-items-body').html('还没有帖子');
          return;
        }
        // 默认头像路径
        let avatarUrl = 'image/avatar01.jpeg';
        // 遍历结果
        data.forEach(article => {
          // 设置默认头像
          if (!article.user.avatarUrl) {
            article.user.avatarUrl = avatarUrl;
          }
          // 构造HTML
          let articleHtmlStr = '<div>'
            + ' <div class="row">'
            + ' <div class="col-auto">'
            + ' <span class="avatar" style="background-image: url(' + article.user.avatarUrl + ')"></span>'
            + ' </div>'
            + ' <div class="col">'
            + ' <div class="text-truncate">'
            + ' <a href="javascript:void(0);" class="article_list_a_title">'
            + ' <strong>' + article.title + '</strong>'
            + ' </a>'
            + ' </div>'
            + ' <div class="text-muted mt-2">'
            + ' <div class="row">'
            + ' <div class="col">'
            + ' <ul class="list-inline list-inline-dots mb-0">'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user"'
            + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
            + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>'
            + ' <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>'
            + ' </svg> '
            + article.user.nickname
            + ' </li>'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg"'
            + ' class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"'
            + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
            + ' stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>'
            + ' <path d="M12 7v5l2 2"></path>'
            + ' <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z">'
            + ' </path>'
            + ' </svg> '
            + article.createTime
            + ' </li>'
            + ' </ul>'
            + ' </div>'
            + ' <div class="col-auto  d-md-inline">'
            + ' <ul class="list-inline list-inline-dots mb-0">'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye"'
            + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
            + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>'
            + ' <path'
            + ' d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">'
            + ' </path>'
            + ' </svg> '
            + article.visitCount
            + ' </li>'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3" /></svg> '
            + article.likeCount
            + ' </li>'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg> '
            + article.markCount
            + ' </li>'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg"'
            + ' class="icon icon-tabler icon-tabler-message-circle" width="24" height="24"'
            + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
            + ' stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>'
            + ' <path d="M12 12l0 .01"></path>'
            + ' <path d="M8 12l0 .01"></path>'
            + ' <path d="M16 12l0 .01"></path>'
            + ' </svg> '
            + article.replyCount
            + ' </li>'
            + ' </ul>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' </div>';
          // 转为元素对象
          let articleItem = $(articleHtmlStr);
          // 获取标题的 a 标签
          let articleTitle = articleItem.find('.article_list_a_title');
          // 处理标题点击事件
          articleTitle.click(function() {
            // 通过全局变量保存当前访问的帖子信息
            currentArticle = article;
            removeNavActive();
            $('#forum-content').load('details.html');
          });
          // 添加到列表
          $('#article-items-body').append(articleItem);
        });
      }

      // ================== 处理发贴事件 =====================
      $('.article_post').click(function () {
        console.log('加载发贴页面');
        removeNavActive();
        $('#forum-content').load('article.html');
      });
    });
  </script>